<template>
  <el-menu-item
    v-if="!isSub"
    :index="props.item.menuId"
    @click="(item) => emits('click-item', item)"
  >
    <item-title />
  </el-menu-item>
  <el-sub-menu v-else :index="props.item.menuId">
    <template #title><item-title /></template>
    <menu-temp v-for="item in props.item.children" :key="item.menuId" :item="item" />
  </el-sub-menu>
</template>

<script setup>
import { computed, h, render } from 'vue'
import SvgIcon from '@/components/SvgIcon/index.vue'
const emits = defineEmits(['click-item'])
const props = defineProps({
  item: {
    type: Object,
    default: () => ({}),
  },
})

const isSub = computed(() => {
  return props.item.children && Array.isArray(props.item.children) && props.item.children.length > 0
})

const ItemTitle = {
  setup() {
    return () =>
      h('div', [
        props.item.icon
          ? h(SvgIcon, {
              iconClass: props.item.icon,
              style: { marginRight: '10px', fontSize: '16px' },
            })
          : null,
        h('span', props.item.menuName),
      ])
  },
}
</script>

<style lang="scss" scoped></style>
